<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
<!--商品展示表格-->
<table id="myTable" lay-filter="tableFilter"></table>
<!--toolbar工具栏-->
<script type="text/html" id="bar1">
    <a class="layui-btn layui-btn-xs" id="a" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs" id="b" lay-event="a1">+</a>
    <a class="layui-btn layui-btn-xs" id="c" lay-event="a2">-</a>
</script>
<!--layui代码-->
    <script>
        layui.use(['table'],function () {
            var table = layui.table;
            var $ = layui.$;
            //渲染表格
            table.render({
                elem: '#myTable',
                url: 'cart/show',
                height: 312,
                page: true,
                limit: 3,
                limits: [3, 4, 5],
                cols: [[ //该方法返回的data数据是个item类型的集合
                    {
                        title: '商品编号',width:80, templet: function (i) {
                            return i.product.pid;
                        }
                    },
                    {
                        title: '商品名',width:180, templet: function (i) {
                            return i.product.pname;
                        }
                    },
                    {
                        title: '单价',width:80, templet: function (i) {
                            return i.product.price;
                        }
                    },
                    {field: 'size', title: '数量', width: 80, sort: true},
                    {
                        title: '总价',width:80, templet: function (i) {
                            return (i.product.price) * (i.size);
                        }
                    },
                    {fixed: 'right', title: '操作', toolbar: '#bar1'},
                ]]
            })
            //删除
            table.on('tool(tableFilter)',function (obj) {
                if(obj.event=='del'){
                    layer.confirm('确认要删除该商品吗？',function (index) {
                        //执行删除方法
                        $.ajax({
                            url: 'cart/remove',
                            data: 'pid=' + obj.data.product.pid,
                            success: function (result) {
                                if (result.flag) {
                                    layer.msg('删除成功');
                                    table.reload('myTable');
                                } else {
                                    layer.msg('删除失败');
                                }
                            }
                        })
                        layer.close(index);
                    })
                }else if(obj.event=='a1'){
                    $.ajax({
                        url:'cart/plus',
                        data:'pid='+obj.data.product.pid,
                        success:function (result) {
                            if(result.flag){
                                layer.msg("数量加1成功");
                                table.reload('myTable');
                            }else{
                                layer.msg('数量加1失败');
                            }
                        }
                    })
                }else if(obj.event=='a2'){
                    $.ajax({
                        url:'cart/minus',
                        data:'pid='+obj.data.product.pid,
                        success:function (result) {
                            if(result.flag){
                                layer.msg("数量减1成功");
                                table.reload('myTable');
                            }else{
                                layer.msg('数量减1失败');
                            }
                        }
                    })
                }
            })
        })
    </script>
</body>
</html>